<template>
	<view>
		<view class="one">
			<text>房屋信息1</text>
			<!-- {{usertypes}}
			{{houseInfo}}
			{{$store.state.house.houseInfo}} -->
		</view>
		<view class="list1">
			<view class="l_one">
				<view class="o_left">
					<text>小区</text>
				</view>
				<picker @change="bindPickerChange" range-key="name" :range="builds">
					<view class="o_right">
						<text>{{selectBuild.name}}</text>
						<i></i>
					</view>
				</picker>
			</view>
			<view class="l_one" >
				<view class="o_left">
					<text>楼栋房号</text>
				</view>
				<view @click="selectHouse" class="o_right">
					<text>{{house.name}}</text>
					<i></i>
				</view>
			</view>
			<picker @change="usertypeChange" range-key="name" :range="usertypes">

				<view class="l_one">
					<view class="o_left">
						<text>住户类型</text>
					</view>
					<view class="o_right">
						<text>{{userTypeSelected.name}}</text>
						<i></i>
						</view>
			</view>
			</picker>
		</view>
		<view class="two">
			<text>个人信息</text>
		</view>
		<view class="personal">
			<view class="info">
				<view class="left">
					<text>姓名</text>
				</view>
				<view class="right">
					<input  v-model="model.name"  type="text" value="" placeholder="请选择姓名" />
					<!-- <text>请选择姓名</text> -->
				</view>
			</view>
			<view class="infoo">
				<view class="left">
					<text>联系电话</text>
				</view>
				<view class="right">
					<input v-model="model.mobile" type="tel" value="" placeholder="请填写联系电话" />
				</view>
			</view>
		</view>
		<button @click="submit" type="default" class="btn">提交</button>
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'
	import {buildingList} from '../../api/building.js'
	import {getUserinfotype} from '../../api/houses'
	import {useradd} from '../../api/userinfo.js'
	export default {
		data() {
			return {
				builds: [],
				selectBuild: {
					name: "请选择小区",
					id: 0
				},
				house: {
					name: "请选择楼栋信息",
					id: 0
				},
				buildindex: 0,
				usertypes: [],
				userTypeSelected: {
					id: 0,
					name: "请选择租户类型"
				},
					model:{
					id: 0,
					photo:null,
					name: "",
					houseid: 0,
					usertype: 1,
					sex:null,
					mobile: "",
					usernative: "",
					cardid: "",
					nation: ""
                }
			}
		},
		created() {
			this.getUserinfotypes();
			this.getBuildList();
			this.updateHouse({
				name: "请选择楼栋信息",
				id: 0
			});

		},
		watch: {
			houseInfo: {
				handler(newValue, oldValue) {
					this.house = newValue;
					this.model.houseid=this.house.id;

					console.log(newValue)
				}
			}
		},
		computed: {
			...mapState({
				houseInfo: state => state.house.houseInfo
			})
		},
		methods: {
		   async userAdd(){
			   
			const res=  await 	useradd(this.model);
			console.log("提交结果11",res)
			   uni.navigateTo({
				url:"/pages/houses/housesCheckSucceed?name="+this.model.name+"&house="+this.house.name
			  })
			},
			submit(){
				 if(this.model.houseid==0){
					 uni.showToast({
					 	icon:"error",
						title:"请选择房间"
					 })
				 }
				 else{
					 this.userAdd();
					 console.log(888,JSON.stringify(this.model))
				 }
				
			},
			...mapMutations({
				updateHouse: 'house/update'
			}),
			selectHouse() {
				if (this.selectBuild.id == 0) {

					uni.showToast({
						title: "请选择小区",
						icon: "error"
					})
				} else {
					uni.navigateTo({
						url: "/pages/houses/list?pid=" + this.selectBuild.id + "&name=" + this.selectBuild.name +
							"&delta=1"
					})
				}

			},
			usertypeChange: function(e) {
				this.userTypeSelected = this.usertypes[e.target.value];
				this.model.usertype=this.userTypeSelected.id;
				console.log('picker发送选择改变，携带值为', e.target.value)
			
			},
			bindPickerChange: function(e) {
				this.selectBuild = this.builds[e.target.value];
				console.log('picker发送选择改变，携带值为', e.target.value)

			},
			async getUserinfotypes() {
				const res = await getUserinfotype();
				if (res.errCode == 10000) {
					this.usertypes = res.data.list.map(item => ({
						id: item.id,
						name: item.name
					}));
				}


			},
			async getBuildList() {
				const res = await buildingList();
				if (res.errCode == 10000) {
					this.builds = res.data.list.map(item => ({
						id: item.id,
						name: item.name
					}));

				}



			}
		}
	}
</script>

<style lang="less" scoped>
	.one {
		width: 750rpx;
		height: 78rpx;
		background-color: #f0f0f0;

		text {
			font-size: 22rpx;
			line-height: 78rpx;
			margin-left: 29rpx;
		}
	}

	.list1 {
		width: 750rpx;
		height: 290rpx;

		.l_one {
			width: 718rpx;
			height: 98rpx;
			border-bottom: 2rpx solid #f0f0f0;
			margin-left: 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.o_left {
				text {
					font-size: 22rpx;
				}
			}

			.o_right {
				display: flex;
				align-items: center;
				position: relative;

				text {
					font-size: 22rpx;
					color: #8c8c8c;
					margin-right: 70rpx;
				}

				i {
					position: absolute;
					width: 20rpx;
					height: 20rpx;
					border-top: 1rpx solid #8c8c8c;
					border-right: 1rpx solid #8c8c8c;
					transform: rotate(45deg);
					right: 30rpx;
				}
			}
		}
	}

	.two {
		width: 750rpx;
		height: 78rpx;
		background-color: #f0f0f0;

		text {
			font-size: 22rpx;
			line-height: 78rpx;
			margin-left: 29rpx;
		}
	}

	.personal {
		width: 750rpx;
		height: 290rpx;

		.info {
			width: 718rpx;
			height: 98rpx;
			border-bottom: 2rpx solid #f0f0f0;
			margin-left: 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				text {
					font-size: 22rpx;
				}
			}

			.right {
				display: flex;
				align-items: center;
				position: relative;

				input {
					width: 120rpx;
					font-size: 22rpx;
					color: #8c8c8c;
					margin-right: 70rpx;
				}
			}
		}

		.infoo {
			width: 718rpx;
			height: 98rpx;
			margin-left: 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				text {
					font-size: 22rpx;
				}
			}

			.right {
				display: flex;
				align-items: center;
				position: relative;

				input {
					width: 160rpx;
					font-size: 22rpx;
					color: #ababab;
					margin-right: 70rpx;
				}
			}
		}

	}

	.btn {
		width: 500rpx;
		height: 74rpx;
		border-radius: 50rpx;
		background-color: #5da5f1;
		line-height: 75rpx;
		font-size: 20rpx;
		color: #fff;
	}
</style>
